<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        /**
         * Object.defineProperty()用法
         * 数据劫持
         */
        // var _nameDefault='默认值'; 
        /* var user={};
        Object.defineProperty(user,'name',{
            get(){ // 取值
                console.log('执行get...');
                // return _nameDefault;
                return "汤姆";
            },
            set(value){ // 赋值
                console.log('执行set...');
                _nameDefault=value.toUpperCase();
            }
        });

        user.name='tom';
        console.log(user.name);  */

        /**
         * 响应式的简单实现
         */
        var _value='';
        var data={} // Model
        // ViewModel
        Object.defineProperty(data,'value',{
            get(){
                return _value;
            },
            set(value){
                _value=value;
                h4Dom=document.getElementById('h4Dom');
                h4Dom.textContent=_value;
            }
        }); 

        function changeValue(newValue){
            data.value=newValue;
        }
    </script>
</head>
<body>
    <!-- View -->
    <div>
        <h4 id="h4Dom"></h4>
        <input type="text" id="inputDom" oninput="changeValue(this.value)">
    </div>
</body>
</html>